<template>
    <div id="quill-editor">Quill</div>
</template>

<script>
import Quill from 'quill'
export default {
  components: {},
  data() {
    return {
      quillEditor: null
    }
  },
  created() {},
  mounted() {
    this.init()
  },
  computed: {},
  methods: {
    // 初始化
    init() {
      this.quillEditor = new Quill('#quill-editor', {
        theme: 'snow',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            ['blockquote', 'code-block'],

            [{ header: 1 }, { header: 2 }], // custom button values
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
            [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
            [{ direction: 'rtl' }], // text direction

            [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
            [{ header: [1, 2, 3, 4, 5, 6, false] }],

            [{ color: [] }, { background: [] }], // dropdown with defaults from theme
            [{ font: ['黑体'] }],
            [{ align: [] }],

            ['clean']
          ]
        }
      })
    }
  },
  beforeDestroy() {
    if (this.quillEditor) this.quillEditor = null
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
#quill-editor {
    height: 500px;
}
</style>
